<template>
	<view :style="viewColor" class="order-submission">
		<view class='order-details'>
			<!-- 给header上与data上加on为退款订单-->
			<view>
				<view class='header acea-row row-middle'>
					<view class='pictrue'>
						<image :src="imgUrl+'/static/order_1.gif'"></image>
					</view>
					<!-- <view class='data'>
						<view class='state'>请在前完成支付!</view>
						<view>1<text class='time'>2</text></view>
					</view> -->
				</view>	
				<view class='nav'>
					<view class='navCon acea-row row-between-wrapper'>
						<view :class="orderInfo.status == 0 ? 'on' : ''">待发货</view>
						<view :class="orderInfo.status == 1 ? 'on' : ''">待收货</view>
						<view :class="orderInfo.status == 2 ? 'on' : ''">已完成</view>
					</view>
					<view class='progress acea-row row-between-wrapper'>
						<view class='iconfont icon-webicon318 t-color'></view>
						<view class='line' :class="orderInfo.status >= 1 ? 'b-color' : ''"></view>
						<view class='iconfont' :class="orderInfo.status >= 1 ? 'icon-webicon318 t-color' : 'icon-yuandianxiao'"></view>
						<view class='line' :class="orderInfo.status >= 2 ? 'b-color' : ''"></view>
						<view class='iconfont' :class="orderInfo.status >= 2 ? 'icon-webicon318 t-color' : 'icon-yuandianxiao'"></view>
					</view>
				</view>
			</view>
			<view>
				<view class='address'>
					<view class='name'>{{orderInfo.real_name || ''}}<text class='phone'>{{orderInfo.user_phone || ''}}</text></view>
					<view>{{orderInfo.user_address || ''}}</view>
				</view>
				<view class='line'>
					<image :src="`${imgUrl}/static/images/line.jpg`"></image>
				</view>
			</view>
			<view class="product">
				<view class="order-shop">{{orderInfo.shop_user.nickname || ''}}<text class="iconfont icon-xiangyou"></text></view>
				<view class="order-product" @click="orderDetail(orderInfo.order_id)">
					<view class="order-product-img">
						<img :src="orderInfo.product_info.thumb" />
					</view>
					<view class='order-product-info'>
						<view class="order-product-title line2">{{orderInfo.product_info.title || ''}}</view>
						<view class="order-product-nums">
							<view class="order-product-price">
								¥{{orderInfo.total_price || 0}}
							</view>
							<view class="order-product-num">×1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="order-info">
				<view class="item">
					<view class="item-key">订单编号:</view>
					<view class="item-value">{{orderInfo.order_sn || ''}}<text class='copy' @tap='copy(1)'>复制</text></view>
				</view>
				<view class="item">
					<view class="item-key">下单时间:</view>
					<view class="item-value">{{orderInfo.create_time || ''}}</view>
				</view>
				<view class="item">
					<view class="item-key">支付状态:</view>
					<view class="item-value">{{orderInfo.paid == 1 ? '已支付' : '未支付'}}</view>
				</view>
				<view class="item">
					<view class="item-key">商品总额:</view>
					<view class="item-value">{{orderInfo.total_price || 0}}</view>
				</view>
				<view class="item" v-if="orderInfo.status > 0">
					<view class="item-key">快递名称:</view>
					<view class="item-value">{{orderInfo.delivery_name || ''}}</view>
				</view>
				<view class="item" v-if="orderInfo.status > 0">
					<view class="item-key">快递单号:</view>
					<view class="item-value">{{orderInfo.delivery_id || ''}}<text class='copy' @tap='copy(2)'>复制</text></view>
				</view>
				<view class="item" v-if="orderInfo.status > 0">
					<view class="item-key">发货时间:</view>
					<view class="item-value">{{orderInfo.delivery_time || ''}}</view>
				</view>
				<view class="item" v-if="orderInfo.status == 2">
					<view class="item-key">确认收货:</view>
					<view class="item-value">{{orderInfo.verify_time || ''}}</view>
				</view>
			</view>
			<view class="submit-order" v-if="orderInfo.status == 0 && orderInfo.paid == 1 && is_shop == 1">
				<view class="submit-button" @tap="clickSendOrder">点击发货</view>
			</view>
			<view class="submit-order" v-else-if="orderInfo.status == 1 && orderInfo.paid == 1 && is_shop == 0">
				<view class="submit-button" @tap="confirmOrder">确认收货</view>
			</view>
		</view>
		<view class="send_order_popup" v-if="send_order_popup && is_shop == 1">
			<view class="send_order_content">
				<view class="send_order_name">
					<view class="send_order_title">快递名称</view>
					<input v-model="sendOrder.delivery_name" type="text" placeholder="请输入快递名称">
				</view>
				<view class="send_order_num">
					<view class="send_order_title">快递单号</view>
					<input v-model="sendOrder.delivery_id" type="text" placeholder="请输入快递单号">
				</view>
				<view class="send_order_button">
					<view class="send_order_fahuo" @click="clickSendOrder2">发货</view>
					<view class="send_order_close" @click="send_order_popup = !send_order_popup">关闭</view>
				</view>
			</view>
		</view>
		<home></home>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	import {
		getUserProductOrderDetail,
		sendUserProductOrder,
		confirmUserProductOrder
	} from "@/api/user_product"
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import parser from "@/components/jyf-parser/jyf-parser";
	import home from '@/components/home/index.vue';
	import authorize from '@/components/Authorize';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			"jyf-parser": parser,
			authorize,
			home,
		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				page: 1,
				limit: 10,
				order_id: 0, // 订单ID
				is_shop: 0, // 1商家 0用户
				send_order_popup: false, // 发货弹窗
				sendOrder: {
					index: 0,
					delivery_name: '',
					delivery_id: '',
				},
				orderInfo: {},
				imgUrl: HTTP_REQUEST_URL
			};
		},
		beforeDestroy() {
		},
		computed: {...configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor']))
		},
		onLoad(options) {
			this.order_id = options.id
			this.is_shop = options.is_shop
			if (this.isLogin) {
				this.orderDetail();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {},
		onReady() {},
		methods: {
			orderDetail() {
				let that = this;
				getUserProductOrderDetail(that.order_id).then(res=>{
					that.orderInfo = res.data;
				}).catch(err=>{
					return that.$util.Tips({title: err});
				})
			},
			// 发货
			clickSendOrder(order_id, index) {
				this.send_order_popup = true;
			},
			clickSendOrder2() {
				let that = this;
				if(!that.sendOrder.delivery_name) return that.$util.Tips({title: '请填写快递名称'});
				if(!that.sendOrder.delivery_id) return that.$util.Tips({title: '请填写快递单号'});
				sendUserProductOrder(that.order_id, that.sendOrder).then(res=>{
					that.$util.Tips({title: '发货成功'}, function(){
						that.sendOrder = {
							index: 0,
							delivery_name: '',
							delivery_id: ''
						}
						that.send_order_popup = false;
						that.orderDetail();
					})
				}).catch(err=>{
					that.$util.Tips({title: err});
				})
			},
			confirmOrder() {
				let that = this;
				uni.showModal({
					title: '确认收货',
					content: '确认点击收货？',
					success:function(res){
						if(res.confirm){
							confirmUserProductOrder(that.order_id).then(res=>{
								that.$util.Tips({title: '确认收货成功'}, function(){
									that.orderDetail();
								})
							}).catch(err=>{
								return that.$util.Tips({title: err});
							})
						}else{
							console.log('用户取消了确认收货')
						}
					}
					
				})
			},
			copy: function(type) {
				let that = this,
				data = '';
				if(type == 1){
					data = this.orderInfo.order_sn
				}else {
					data = this.orderInfo.delivery_id
				}
				uni.setClipboardData({
					data: data
				});
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			}
		}
	}
</script>

<style scoped lang="scss">
	.order-submission {
		padding-bottom: 110rpx;
	}
	.order-details .header {
		padding: 0 30rpx;
		height: 150rpx;
		background-image: linear-gradient(to right, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
		&.presell_header{
			background-repeat: no-repeat;
			background-size: cover;
			padding: 35rpx 50rpx;
			.data{
				margin: 8rpx 0 0 26rpx;
				.state{
					font-weight: normal;
					font-size: 24rpx;
				}
			}
		}
	}
	.order-details .header.on {
		background-color: #666 !important;
	}
	.order-details .header .pictrue {
		width: 110rpx;
		height: 110rpx;
	}
	.order-details .header .pictrue image {
		width: 100%;
		height: 100%;
	}
	.order-details .header .data {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-left: 27rpx;
	}
	.order-details .header .data.on {
		margin-left: 0;
	}
	.order-details .header .data .state {
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 7rpx;
	}
	.presell_header .presell_payment{
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		margin-left: 26rpx;
		.iconfont{
			font-weight: normal;
			margin-right: 8rpx;
		}
	}
	.order-details .nav {
		background-color: #fff;
		font-size: 26rpx;
		color: #282828;
		padding: 25rpx 0;
	}
	.order-details .nav .navCon {
		padding: 0 40rpx;
	}
	.order-details .nav .on {
		color: var(--view-theme);
	}
	.order-details .nav .progress {
		padding: 0 65rpx;
		margin-top: 10rpx;
	}
	.order-details .nav .progress .line {
		width: 100rpx;
		height: 2rpx;
		background-color: #939390;
	}
	.order-details .nav .progress .b-color {
		background-color: var(--view-theme);
	}
	.order-details .nav .progress .iconfont {
		font-size: 25rpx;
		color: #939390;
		margin-top: -2rpx;
		&.t-color{
			color: var(--view-theme);
		}
	}
	.order-details .address {
		font-size: 26rpx;
		color: #868686;
		background-color: #fff;
		margin-top: 13rpx;
		padding: 35rpx 30rpx;
	}
	.order-details .address .name {
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}
	.order-details .address .name .phone {
		margin-left: 40rpx;
	}
	.order-details .address {
		font-size: 26rpx;
		color: #868686;
		background-color: #fff;
		margin-top: 13rpx;
		padding: 35rpx 30rpx;
	}
	.order-details .address .name {
		font-size: 30rpx;
		color: #282828;
		margin-bottom: 15rpx;
	}
	.order-details .address .name .phone {
		margin-left: 40rpx;
	}
	.order-details .line {
		width: 100%;
		height: 3rpx;
	}
	.order-details .line image {
		width: 100%;
		height: 100%;
		display: block;
	}
	.product {
		background-color: #fff;
		margin-top: 13rpx;
		.order-shop {
			padding: 20rpx 30rpx;
			border-bottom: 1px solid #F5F5F5;
		}
	}
	.order-product {
		display: flex;
		flex-wrap: nowrap;
		padding: 20rpx 30rpx;
		background-color: #fff;
		.order-product-img {
			width: 130rpx;
			height: 130rpx;
			image {
				width: 130rpx;
				height: 130rpx;
			}
		}
		.order-product-info {
			flex: 1;
			margin: 6rpx 0 0 20rpx;
			display: flex;
			flex-wrap: nowrap;
			.order-product-title {
				flex: 1;
				height: fit-content;
			}
			.order-product-nums {
				color: #ccc;
				padding-left: 20rpx;
				text-align: right;
			}
		}
	}
	.order-info {
		margin-top: 13rpx;
		padding: 30rpx;
		background-color: #fff;
		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.item-value {
				color: #868686;
				.copy {
					border: 1px solid #000;
					padding: 2rpx 10rpx;
					border-radius: 30rpx;
					font-size: 20rpx;
					margin-left: 10rpx;
				}
			}
		}
	}
	.submit-order {
		width: 100%;
		height: 100rpx;
	height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		background-color: #fff;
		padding: 0 30rpx;
		font-size: 28rpx;
		color: #333;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 30;
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		justify-content: flex-end;
		.submit-button {
			font-size: 30rpx;
			width: 240rpx;
			height: 70rpx;
			background-color: var(--view-theme);
			border-radius: 50rpx;
			text-align: center;
			line-height: 70rpx;
		}
	}
	.send_order_popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		.send_order_content {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 300rpx 30rpx 0;
			padding: 30rpx;
			font-size: 34rpx;
			.send_order_num, .send_order_button {
				margin-top: 20rpx;
			}
			input {
				font-size: 30rpx;
				padding: 20rpx 0;
				border-bottom: 1px solid #F5F5F5;
			}
			.send_order_button {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				.send_order_fahuo {
					background-color: var(--view-theme);
					border:1rpx solid var(--view-theme);
					padding: 10rpx 20rpx;
					border-radius: 16rpx;
				}
				.send_order_close {
					border:1rpx solid #F5F5F5;
					padding: 10rpx 20rpx;
					border-radius: 16rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>